<template>
  <div>
    <!-- 头部 -->
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <!-- 内容区 -->
    <div class="container">
      <!-- 添加评论 -->
      <AddComment :addComment="addComment" />
      <!-- 评论列表展示 -->
      <!-- 以标签属性方式传递props数据 -->
      <CommentList :comments="comments" :delComment="delComment" />
    </div>
  </div>
</template>

<script>
import AddComment from "./views/AddComment";
import CommentList from "./views/CommentList";

export default {
  name: "App",
  components: {
    AddComment,
    CommentList,
  },
  data() {
    return {
      // 评论数据
      comments: [
        {
          id: 1,
          username: "静哥",
          content: "我喜欢大保健",
        },
        {
          id: 2,
          username: "陶哥",
          content: "我喜欢洗脚",
        },
      ],
    };
  },
  methods: {
    // 添加评论
    addComment(comment) {
      // 函数需不需要参数：看函数内部有没有不确定的量
      // 在React中，更新数据，不建议修改原数据的 -> this.setState({ comments: [...this.state.comments, comment] })
      // 在Vue中，可以直接修改数据
      this.comments.push({
        id: Date.now(), // 唯一的id
        ...comment, // 没有id，需要添加id
      });
    },
    // 删除评论
    // delComment(id) {
    //   this.comments = this.comments.filter((comment) => comment.id !== id);
    // },
    delComment(index) {
      this.comments.splice(index, 1);
    },
  },
};
</script>

<style>
/* 
  自己写的样式放组件内
  哪个组件需要的样式，就放这个组件中
*/
</style>
